音にフィルターをかける(Web Audio Api)

Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。

以前、midi(音の「高さ」「長さ」「大きさ」の情報数値)を読み取ってPCのキーボードに音階をサンプリングして音を鳴らすってことをやりました。

今回は音の周波数領域に対してフィルターをかけて音を加工してみたいと思います。

ラジオや電話の話し声を「聴きやすくするため」に音質を補正する目的で使う。

周波数はヘルツ(Hz)という単位が用いられます。一般的に音の高さを表します。

低音域(bass)　　２０～３００hz バスドラ、ベース

中音域(middle)　　３００hz～１khz ギター、ボーカル、キーボード、タム類　

高音域(treble)　　１khz～１０khz　シンバル類　

超高音域(presence) １０khz～ キラキラした余韻みたいな音

https://gyazo.com/54512de4a0e9c216bc03896188869f76

まずホワイトノイズを作ります。

code: js

const audioCtx = new AudioContext();

インスタンスを生成。

配列の次元を設定する。今回はモノラルなので１に設定。

サンプルレート・サンプリング周波数 => アナログ信号をデジタル信号化するときの単位時間当たりの標本化回数のことである。

https://gyazo.com/9d2854605a8f9fa22f3114baf1c246ed

サンプリング周波数が高いほど高い周波数の音まで忠実に再生して音質を良くすることができる。データ量も増える。

一般的なサンプリング周波数は44.1KHz 。

人間が聞こえる周波数の限界が20KHzあたり。

ナイキスト周波数 => サンプリング周波数の半分。1波長に2回サンプリングすれば、元の信号を完全に復元できるというものです。44.1kHzで収録されるCDは、その半分の22.05kHzが、理論上収録可能な最大周波数です。

・デジタル衛星放送テレビジョン：48kHz

・電話(ISDN)：8kHz

・電話(高音質IPフォン)：16kHz or 32kHz

・YouTube動画(標準モード)：22.05kHz

らしい

例 ホワイトノイズの波形

https://gyazo.com/919cbb9eebcc0209e8da71afcd3c3719

code: js

// モノラル

const channels = 1;

// サンプルフレームの数

const frameCount = audioCtx.sampleRate * 30;

// AudioContextのサンプルレートで30秒間の空のモノラルバッファを生成する

const noiseBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);

// バッファにホワイトノイズを書き込む;

for(let i = 0; i < frameCount; ++i) {

// 単なる-1.0から1.0の間の乱数の値である

}

Web Audio APIでは様々な種類のノードが準備されています。これらを必要に応じて作成し、connect()して行く事で様々な音を合成したりエフェクトをかけたりできるようになります。

バッファを再生する

code: js

// AudioBufferSourceNodeにバッファを設定する

const src = new AudioBufferSourceNode(audioCtx, { buffer: noiseBuffer });

// AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる(audioCtx.destinationはAudioContextが持っている最終的な出力ポイントでここに繋がれた信号が音になって出てくる

src.connect(audioCtx.destination);

// 音源の再生を始める

src.start();

フィルターをかける

フィルターの種類

ローパス・フィルター（LPF）=> カットオフ周波数より低い周波数の成分はほとんど減衰させず、遮断周波数より高い周波数の成分を逓減させるフィルタである。(高音の雑音を取り除きたい

※カットオフ周波数とは、通過域と遷移域の境界となる周波数です。

https://gyazo.com/7ac599a12e1ee9917c7069e0f0058f4d

ハイパス・フィルター（HPF) => カットオフ周波数より高い周波数の成分はほとんど減衰させず、遮断周波数より低い周波数の成分を逓減させるフィルタである。(低音の雑音を取り除きたい

https://gyazo.com/10c84602fc37c098a7715b8cbcdf0556

バンドパス・フィルター（BPF) => 必要な周波数帯のみを通し、他の周波数は通さない（減衰させる）。(ある帯域の音を残したい、強調したい

https://gyazo.com/bc9d5655d62c4c7831c6a6674d2e364f

シェルフフィルター => カットオフ周波数の上または下をまとめて持ち上げたり減衰させたりする事で棚のような段差を付けるフィルター

https://gyazo.com/0963f5b0859ea63c56999bf3ee8be05a

ノッチフィルター => バンドパスフィルタとは逆で、ある帯域の周波数を通さないフィルター。ハム音( “ブーン”という雑音のこと。学校などで先生がマイクで話すときに良く聞こえるやつ)の除去とかに使う。(東日本の交流は50Hzで西日本は60Hz)

https://gyazo.com/46729655cb0781e0cb214e85137f2525

ピーキングフィルター => カットオフ周波数の周辺を増減するフィルター。

https://gyazo.com/8d14b2fc135294df4175e390c441ea90

code: js

// フィルターノードを生成(frequencyはカットオフ周波数, Qはカットオフ周波数における鋭さを示す値)

const filter = new BiquadFilterNode(audioCtx, { frequency: 5000, Q: 5 });

filter.type = 'highpass'

filter.connect(audioCtx.destination);

アナライザーノードを使う あんまわかんなかった

code:js

const analyser = new AnalyserNode(audioctx, { fftSize: 1024 });

filter.connect(analyser).connect(audioctx.destination);

const analyseData = new Float32Array(1024); // fftSize

code:js

// analysedataにスペクトル情報を取得する。

analyser.getFloatFrequencyData(analyseData);

// analyseDataをプロットする

wavファイルの読み込みの場合。

code: js

const audioBuffer = await LoadSample(audioCtx, url);

function LoadSample(actx, url) {

return new Promise((resolv)=>{

fetch(url).then((response)=>{

// 純粋なバイナリデータとしてレスポンスを返す

return response.arrayBuffer();

}).then((arrayBuffer)=>{

// AudioBufferにデコードする

return actx.decodeAudioData(arrayBuffer);

}).then((AudioBuffer)=>{

resolv(AudioBuffer);

})

});

}